<template>
    <div class="warp">
        <el-dialog destroy-on-close :before-close="closeDialog" :show-close="false" v-model="state.dialog.isShowDialog"
            :title="state.dialog.title" width="32%">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" style="color: #fff !important;">注册项目移交情况</h4>
                    <el-button style="background-color:#69FFE322 !important; color: #69FFE3; border: 0px !important;"
                        :icon="CircleCloseFilled" circle @click="close" />
                </div>
                <div>
                    <div style="color: #fff !important;font-size: 14px;margin-top: 10px;">完成注册并移交重大项目和高能级项目 347个</div>
                </div>
            </template>
            <div class="box" ref="rightChartsRef">

            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { ref, reactive, nextTick,  markRaw } from 'vue'
import * as echarts from 'echarts';
import { useDemoDialogTwoApi } from '@/api/demo';

// 定义变量内容
const emit = defineEmits(['refresh'])

const rightChartsRef = ref()
const state = reactive({
    // 弹窗信息
    dialog: {
        isShowDialog: false,
        title: '',
        loading: false,
    },
    info: null as any,
    myCharts: [] as any,
    rightChartsData: null as any,
})

// 打开dialog
const openDialog = () => {
    state.dialog.isShowDialog = true

    useDemoDialogTwoApi().then((res: any) => {
        state.info = res
    }).then(() => {
        initrightCharts()
        initEchartsResize()
    })

}
const closeDialog = () => {
    emit('refresh')
    state.dialog.isShowDialog = false
}

// 暴露变量
defineExpose({
    openDialog
})


const initrightCharts = () => {
    state.rightChartsData = markRaw(echarts.init(rightChartsRef.value));
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: state.info.days,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#063374",
                    width: 1,
                    type: "solid"
                }
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#00c7ff",
                    fontSize: 16,
                }
            },
        }],
        yAxis: [{
            type: 'value',
            name: '亿元',
            axisLabel: {
                formatter: '{value}',
                fontSize: 18,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#00c7ff",
                    width: 1,
                    type: "solid"
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#063374",
                }
            }
        }],
        series: [{
            type: 'bar',
            data: state.info.value1,
            barWidth: 10, //柱子宽度
            barGap: 10, //柱子之间间距
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#2196F3'
                    }, {
                        offset: 1,
                        color: '#2196F3'
                    }]),
                    opacity: 1,
                }
            }
        }, {
            type: 'bar',
            data: state.info.value2,
            barWidth: 10,
            barGap: 1,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#69FFE3'
                    }, {
                        offset: 1,
                        color: '#69FFE3'
                    }]),
                    opacity: 1,
                }
            }
        }]
    };
    state.rightChartsData.setOption(option);
    state.myCharts.push(state.rightChartsData);
}


// 批量设置 echarts resize
const initEchartsResizeFun = () => {
    nextTick(() => {
        for (let i = 0; i < state.myCharts.length; i++) {
            setTimeout(() => {
                state.myCharts[i].resize();
            }, i * 1000);
        }
    });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
    window.addEventListener('resize', initEchartsResizeFun);
};



</script>

<style lang="scss" scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.warp {
    :deep(.el-dialog) {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #69FFE3 !important;
        height: 60% !important;
    }

    :deep(.el-dialog .el-dialog__header) {
        margin-right: 0;
    }

    :deep(.el-dialog .el-dialog__body) {
        padding-top: 0;
    }
}


.box {
    height: 650px;
}
</style>